<template>
  <!-- 组织管理 -->
  <div class="app-container ">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="组织名称:" prop="orgName">
            <el-input v-model.trim="filterForm.orgName" style="width: 200px;margin-right:10px" maxlength="30" class="filter-item limit" clearable placeholder="请输入内容" @keyup.enter.native="handleFilter" />
          </el-form-item>
          <el-form-item label="组织编码:" prop="orgCode">
            <el-input v-model.trim="filterForm.orgCode" style="width: 200px;margin-right:10px" maxlength="30" class="filter-item limit" clearable placeholder="请输入内容" @keyup.enter.native="handleFilter" />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button v-permission="['ORG_ADD_BUTTON']" type="primary" icon="el-icon-plus" @click="onAdd">新增</el-button>
          <!-- <el-button v-permission="['ORG_OPENALL_BUTTON']" icon="el-icon-folder-opened" @click="onExpandAll">展开全部</el-button> -->
          <el-button v-permission="['ORG_CLOSEALL_BUTTON']" icon="el-icon-folder" @click="onFoldAll">折叠全部</el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          v-if="refreshTable"
          ref="table"
          v-loading="loading"
          border
          :data="tableData"
          style="width: 100%;margin-bottom: 10px;"
          row-key="orgId"
          :default-expand-all="isExpandAll"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :header-cell-style="headerCellStyle"
          :expand-row-keys="expandRowKeys"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            label="序号"
            type="index"
            width="70"
            :index="indexMethod"
          />
          <el-table-column
            v-if="columns[0].show"
            key="orgName"
            prop="orgName"
            label="组织名称"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[1].show"
            key="orgCode"
            prop="orgCode"
            label="组织编码"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[2].show"
            key="orgSort"
            prop="orgSort"
            label="排序"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[3].show"
            key="createTime"
            prop="createTime"
            label="创建时间"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :key="Math.random()"
            :fixed="$store.getters.device == 'mobile'? null :'right' "
            prop="action"
            label="操作"
            width="288"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                v-permission="['ORG_UPDATE_BUTTON']"
                size="mini"
                @click="onDetail(scope.row)"
              >查看
              </el-button>
              <el-button
                v-permission="['ORG_ADDCHILDREN_BUTTON']"
                size="mini"
                @click="onAddChildren(scope.row)"
              >新增下级
              </el-button>
              <el-button
                v-if="scope.row.orgCode != 'topOrg'"
                v-permission="['ORG_UPDATE_BUTTON']"
                size="mini"
                @click="onEdit(scope.row)"
              >修改
              </el-button>
              <el-button
                slot="reference"
                v-permission="['ORG_DEL_BUTTON']"
                :disabled="scope.row.children && scope.row.children.length > 0 "
                size="mini"
                type="danger"
                @click="onDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <OrgEdit ref="orgForm" />
    </div>
  </div>
</template>
<script>
import hrOrganizationApi from '@/framework/api/hrOrganization'
import { mapGetters } from 'vuex'
import Item from '@/framework/layout/components/Sidebar/Item'
import OrgEdit from './components/orgEdit.vue'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'
export default {
  name: 'OrganizationManage',
  components: {
    Item,
    OrgEdit
  },
  mixins: [dialogColumn],
  data() {
    return {
      refreshTable: true, // 重新渲染表格
      isExpandAll: false, // 是否展开
      loading: false,
      filterForm: {
        orgName: '',
        orgCode: ''
      },
      // 列信息
      columns: [
        { prop: 'orgName', label: `组织名称`, show: true },
        { prop: 'orgCode', label: `组织编码`, show: true },
        { prop: 'orgSort', label: `顺序`, show: true },
        { prop: 'createTime', label: `创建时间`, show: true }
      ],
      tableData: [],
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      expandRowKeys: [],
      insideDialogVisiable: false
    }
  },
  computed: {
    ...mapGetters(['roles', 'permission_routes'])
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.getList()
    },
    indexMethod(index) {
      return index + 1
    },
    // 获取页面列表
    getList() {
      this.loading = true
      hrOrganizationApi.getOrgList(this.filterForm).then(res => {
        if (res.success) {
          this.tableData = res.data.map((item, index) => {
            item.haschildren = true
            return item
          })
          // 查找rowId对应的列表的下标值
          const index1 = this.tableData.findIndex(item => item.id === this.rowId)
          if (index1 >= 0) {
            this.openDetail(this.tableData[index1])
          }
        }
        this.loading = false
      })
    },
    /** 展开详情 */
    openDetail(row) {
      this.$nextTick(() => {
        this.$refs.table.toggleRowExpansion(row, true)
      })
    },
    // 搜索
    handleFilter() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    // 点击新增组织按钮
    onAdd() {
      this.$refs.orgForm.openOrg('', 'add')
    },
    // 点击新增下级组织按钮
    onAddChildren(row) {
      this.$refs.orgForm.openOrg(row, 'addChildren')
    },
    // 查看
    onDetail(row) {
      this.$refs.orgForm.openOrg(row, 'detail')
    },
    // 点击修改按钮
    onEdit(row) {
      this.$refs.orgForm.openOrg(row, 'update')
    },
    onExpandAll() {
      this.tableData.forEach(value => {
        this.$refs.table.toggleRowExpansion(value, true)
      })
    },
    onFoldAll() {
      // this.tableData.forEach(value => {
      //   this.$refs.table.toggleRowExpansion(value, false)
      // })
      this.refreshTable = false
      this.isExpandAll = false
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
    // 删除
    onDelete(row) {
      this.$refs.orgForm.deleteOrg(row)
    },
    // 完成删除
    onDeleted() {
      this.getList()
    }

  }
}
</script>

<style lang="scss">
 .el-table__fixed-right {
height: 100%;
}
  .menu{
    margin: 20px;
  }
  .tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    padding-left: 4px;
    color: #fff;
  }
  /*打开时文字位置设置*/
  .tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: 20px;
  }
  /*关闭时文字位置设置*/
  .tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 18px;
  }
  /*显示文字*/
  .tableScopeSwitch .el-switch__label.is-active {
    display: block;
  }
</style>

<style lang="scss" scoped>
  @import '@/framework/styles/variables';
  .el-dropdown-link {
    cursor: pointer;
    color: #F54A43;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
